<template>
	<view>
		<view class="headimg" style="background-image:url(../../../static/shuijiao6.jpg);">
			<view class="headtitle">排行榜</view>
		</view>
		<view class="headys"></view>
		<view class="ch-card">
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao1.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-card">
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao1.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-card">
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao1.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
		<view class="ch-card">
			<view class="ch-bjimg" style="background-image:url(../../../static/shuijiao1.jpg);"></view>
			<view class="ch-title2">石家庄海悦天地海洋公园</view>
			<view class="ch-title3">360度体验鱼群从身边游过的感觉</view>
			<view class="ch-title3">2 推荐·2 评论</view>
			<view class="ch-userinfo2"><text class="ch-rel-face" style="background-image:url(../../../static/logo.png);"></text><text
				 class="ch-rel-username ">近朱者炽</text><text class="ch-rel-date ch-fr">1分钟前</text></view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.headimg {
		width: 100%;
		height: 200upx;
		overflow: hidden;
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.headimg image {
		width: 100%;
		position: absolute;
	}

	.headtitle {
		text-align: center;
		color: #fff;
		font-size: 36upx;
		line-height: 140upx;
		position: absolute;
		bottom: 35upx;
		right: 0;
		left: 0;
	}

	.headys {
		width: 100%;
		border-radius: 100upx;
		background: #FCFCFC;
		height: 60upx;
		position: absolute;
		top: 170upx;
	}
</style>
